


<template>
  <div id="my-app">
    <input type="text" v-model="langCode">
    <button @click="clicked()">Click to change language</button>

    <h1 :style="background">{{ lang.name }}</h1>
    <input type="text" v-model="lang.name">
    <input type="text" v-model="background.backgroundColor">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
import localize from "./Lang/language.js";
import Vue from "vue"

export default {
  data: () => {
    return {
      background: {
        backgroundColor: ""
      },
      langCode: localize.current
    };
  },
  methods: {
    clicked() {
      localize.changeLanguage(this.langCode, (okay) => {}, (error) => {
        alert(error)
      })
    }
  }
};
</script>

<style>
#my-app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>